<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8" />
	<title>我的购物车</title>
	<link rel="stylesheet" th:href="@{/static/before/css/style.css}" />
	<script th:src="@{/webjars/jquery/2.1.3/jquery.js}" type="text/javascript"></script>
</head>
<body>
<div th:insert="before/header :: header"></div>
<div th:insert="before/header02 :: header02"></div>

<div class="banner_x center">
	<a href="index.html" target="_blank"></a>

	<div class="wdgwc fl ml40">我的购物车</div>
	<div class="wxts fl ml20">温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算</div>
	<div class="dlzc fr">


	</div>
	<div class="clear"></div>
</div>
<div class="xiantiao"></div>
<div class="gwcxqbj">
	<div class="gwcxd center">
		<div class="top2 center">
			<div class="sub_top fl">
				<input type="checkbox" value="quanxuan" class="quanxuan" />全选
			</div>
			<div class="sub_top fl">商品名称</div>
			<div class="sub_top fl">单价</div>
			<div class="sub_top fl">数量</div>
			<div class="sub_top fl">小计</div>
			<div class="sub_top fr">操作</div>
			<div class="clear"></div>
		</div>
		<div class="content2 center" th:each="shcarli,i:${shoppingcarli}">
			<div class="sub_content fl ">
				<input type="checkbox"  class="boxx" name="checkboxBtn" th:value="${shcarli.sid}" checked="checked"/>
			</div>
			<div class="sub_content fl"><img th:src="@{http://192.168.1.58:8001/{tuname}/1.jpg(tuname=${shcarli.image})}" /></div>
			<div class="sub_content fl ft20" th:text="${shcarli.gname}+'+'+${shcarli.gtypename}+'+'+${shcarli.gcolorname}"></div>
			<div class="sub_content fl "  th:text="${shcarli.price}" ></div>
			<div class="sub_content fl">
				<input class="shuliang" name="count" type="number" th:onchange="|javascript:changenum(${i.index})|" th:value="${shcarli.count}" step="1" min="1" >
			</div>
			<input type="hidden" name="difprice" th:value="${shcarli.difprice}"/>
			<input type="hidden" name="price" th:value="${shcarli.price}">
			<div class="sub_content fl" name="onetotal" th:id="${shcarli.sid}" th:text="${shcarli.count*(shcarli.price+shcarli.difprice)}"></div>
			<div class="sub_content fl"><a href="javascript:;" th:value="${shcarli.sid}" name="delcar" th:onclick="|javascript:delcar(${i.index})|">×</a></div>
			<div class="clear"></div>
			<form id="jieSuanForm" action="/order" method="post">
				<input type="hidden" name="cartItemIds" id="cartItemIds"/>
				<input type="hidden" name="total" id="hiddenTotal"/>
				<input type="hidden" name="counts" id="totalCount">
			</form>
		</div>
	</div>
	<div class="jiesuandan mt20 center">
		<div class="tishi fl ml20">
			<ul>
				<li><a href="/index">继续购物</a></li>
				<li>|</li>
				<li>共<span id="countgoods">2</span>件商品，已选择<span id="txts">1</span>件</li>
				<div class="clear"></div>
			</ul>
		</div>
		<div class="jiesuan fr">
			<div class="jiesuanjiage fl">合计（不含运费）：<span id="totals">2499.00元</span></div>
			<div class="jsanniu fr"><input class="jsan" type="button" name="jiesuan" id="jiesuan" onclick="jiesuan();" value="去结算"/></div>
			<div class="clear"></div>
		</div>
		<div class="clear"></div>
	</div>
</div>
<div class="clear "></div>
<div style="position: relative;top: 50px" th:insert="before/footer :: footer"></div>
</body>
</html>

<script type="text/javascript">

	function changenum(i) {
		var sid = $(".boxx").eq(i).val();
		var $count = $("input[name=count]").eq(i);
		var $onetotal = $("div[name=onetotal]").eq(i);
		var price = $("input[name=price]").eq(i).val();
		var difprice = $("input[name=difprice]").eq(i).val();
		var count = $count.val();
		$onetotal.html(count*price+difprice*count);
		showTotal();
		$.ajax({
			"url":"/changecount/"+sid+"/"+count,
			"datatype":"json",
			"type":"get",
			"success":function (data) {
				if (data == "true") {
					alert("修改数量成功");
				}
			}
		})
	}
	$(function () {
		// 加载完页面时,计算总计
		showTotal();
		$('.boxx').on('click', function () {
			// 选择多选框后,再重新计算
			showTotal();
		});
	})
	// 计算总计
	function showTotal() {
		var total = 0;
		//选择几件
		var number = 0;
		//总的几件
		var countgoods = 0;
		// 1. 获取所有的被勾选的条目复选框！循环遍历
		$(".boxx").each(function () {
			var isChecked = $(this).prop("checked");
			countgoods+=1;
			// 如果多选框被选中
			if (isChecked == true) {
				// 2. 获取复选框的值，即其他元素的前缀
				var id = $(this).val();
				// alert("id" + id);
				//3. 再通过前缀找到小计元素，获取其文本
				var text = $("#" + id).text();
				// alert(text);
				//4. 累加计算
				total += Number(text);
				number += 1;
				// alert(total);
			}
		});
		// 5. 把总计显示在总计元素上
		$("#countgoods").text(countgoods);
		$("#txts").text(number);//
		$("#totals").text(total.toFixed(2));//toFixed(2)函数的作用是把total保留2位
	}
	// 结算 S
	function jiesuan() {
		// 1.获取所有被选择的条目的id,放到数组中
		var cartItemIdArray = new Array();
		var counts = 0;//总的几件商品
		$(".boxx").each(function () {
			var isChecked = $(this).prop("checked");
			// 如果多选框被选中
			if(isChecked == true) {
				cartItemIdArray.push($(this).val());//把复选框的值添加到数组中
				counts+=1;
			}
		});
		// 2. 把数组的值toString()，然后赋给表单的cartItemIds这个hidden
		$("#cartItemIds").val(cartItemIdArray.toString());
		// 把总计的值，也保存到表单中
		$("#hiddenTotal").val($("#totals").text());
		$("#totalCount").val(counts);
		// 3. 提交这个表单
		$("#jieSuanForm").submit();
	}
	//删除购物车
	function delcar(i) {
		var id = $("a[name=delcar]").eq(i).attr("value");
		$.ajax({
			"url":"/delcar/"+id,
			"type":"get",
			"success":function (data) {
				if(data=="true"){
					alert("删除成功！");
					location.reload();
				}else{
					alert("删除失败！")
				}
			}
		})
	}
</script>